<template>
	<view class="uswitch_p" @click="switch_click()">
		<view class="uswitch" :class="{ on: switchon == 1 }" :style="[mystyle]">
			<!-- <view class="txt" v-if="show_txt">
				{{ switchon == 1 ? txt_config['on'] : txt_config['un'] }}
			</view> -->

			<view class="slide_view" :style="[slidestyle, { left: switchon == 1 ? `${width - height}rpx` : '0rpx' }]">
				<view class="v"></view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'myswitch',
	props: {
		show_txt: {
			type: [Boolean],
			default: false,
		},

		switchon: {
			type: [Number, String],
			default: 0,
		},
		item: {
			type: [Object],
			default: {},
		},
		index: {
			type: [Number, String],
			default: 0,
		},
		width: {
			type: [Number, String],
			default: '82',
		},
		height: {
			type: [Number, String],
			default: '42',
		},
		padding: {
			type: [Number, String],
			default: '4',
		},

		txt_config: {
			default: {
				on: '已开启',
				un: '未开启',
			},
		},
		// bg: {
		// 	type: [String],
		// 	default: '#EBEDF3'
		// },
		// bg_on: {
		// 	type: [String],
		// 	default: '#1FD1C2'
		// }
	},
	data() {
		return {};
	},
	beforeCreate() {},
	created() {},
	mounted() {
		// const query = uni.createSelectorQuery().in(this);
		// query.select('.uswitch_p').fields({ size: true, rect: true }, (result) => {
		// 	console.log('DOM Element:', result);
		// }).exec();
	},
	computed: {
		mystyle() {
			return {
				width: `${this.width}rpx`,
				height: `${this.height}rpx`,
				// padding: `${this.padding}rpx`,
				borderRadius: `${this.height / 2}rpx`,
			};
		},
		slidestyle() {
			return {
				width: `${this.height}rpx`,
				height: `${this.height}rpx`,
				padding: `${this.padding}rpx`,
				// borderWidth: `${this.padding}rpx`,
				// borderStyle: `solid`,
			};
		},
	},
	methods: {
		switch_click() {
			let _this = this;
			this.$emit('switch_click', { item: _this.item, value: _this.switchon, index: _this.index });
		},
	},
	watch: {},
};
</script>

<style lang="scss">
// 页面样式
.uswitch_p {
}

.uswitch {
	// width: var(--width);
	// height: var(--height);
	// border-radius: calc(var(--height) / 2);
	background-color: #383950;
	position: relative;
	transition: background-color 0.4s ease;

	.txt {
		font-size: 20rpx;
		font-weight: 400;
		color: #ffffff;
	}

	.slide_view {
		position: absolute;
		top: 0;

		display: flex;
		background-color: #383950;
		border-radius: 50%;
		transition: background-color 0.4s ease, left 0.4s ease, right 0.4s ease;
		box-sizing: border-box;

		.v {
			background-color: #fff;
			flex: 1;
			border-radius: 50%;
		}
	}

	&.on {
		background-color: #1fd1c2;

		.slide_view {
			right: 0;
			background-color: #1fd1c2;
		}
	}

	// .slide_view {
	// 	position: absolute;
	// 	top: 0;

	// 	display: block;
	// 	background: #fff;
	// 	border-radius: 50%;
	// 	border-color: #EBEDF3;
	// 	transition: border-color 0.4s ease, right 0.4s ease;
	// 	box-sizing: border-box;
	// }

	// &.on {
	// 	background: #1FD1C2;

	// 	.slide_view {
	// 		right: 0;
	// 		border-color: #1FD1C2;
	// 	}
	// }
}
</style>
